<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Store Reactivity Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Task Store Reactivity Test</h1>
        
        <div class="test-section">
            <h3>Store Status</h3>
            <div id="storeStatus" class="status info">
                Initializing...
            </div>
            <button onclick="checkStoreStatus()">Check Store Status</button>
        </div>
        
        <div class="test-section">
            <h3>Task Operations</h3>
            <button onclick="createTestTask()">Create Test Task</button>
            <button onclick="updateTestTask()">Update Test Task</button>
            <button onclick="deleteTestTask()">Delete Test Task</button>
            <button onclick="clearAllTasks()">Clear All Tasks</button>
        </div>
        
        <div class="test-section">
            <h3>Reactivity Test</h3>
            <div id="reactivityStatus" class="status info">
                Ready to test reactivity
            </div>
            <button onclick="testReactivity()">Run Reactivity Test</button>
        </div>
        
        <div class="test-section">
            <h3>Console Log</h3>
            <div id="log" class="log"></div>
            <button onclick="clearLog()">Clear Log</button>
        </div>
    </div>

    <script>
        // Mock task store for testing
        let tasks = [];
        let testTaskId = null;
        
        // Logging function
        function log(message, type = 'info') {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span style="color: #666;">[${timestamp}]</span> ${message}`;
            logDiv.appendChild(logEntry);
            logDiv.scrollTop = logDiv.scrollHeight;
            console.log(message);
        }
        
        // Update status display
        function updateStatus(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `status ${type}`;
        }
        
        // Check store status
        function checkStoreStatus() {
            log('Checking store status...');
            log(`Total tasks: ${tasks.length}`);
            log(`Tasks: ${JSON.stringify(tasks, null, 2)}`);
            updateStatus('storeStatus', `Total tasks: ${tasks.length}`, 'info');
        }
        
        // Create test task
        function createTestTask() {
            log('Creating test task...');
            const task = {
                id: Date.now().toString(),
                filename: 'Test Task',
                url: 'https://example.com/test.m3u8',
                status: 'pending',
                progress: 0,
                downloadedSize: 0,
                totalSize: 0,
                downloadedSegments: 0,
                totalSegments: 0,
                startTime: Date.now()
            };
            
            tasks.push(task);
            testTaskId = task.id;
            log(`Created task: ${task.id}`);
            updateStatus('storeStatus', `Created task: ${task.id}`, 'success');
            checkStoreStatus();
        }
        
        // Update test task
        function updateTestTask() {
            if (!testTaskId) {
                log('No test task to update', 'error');
                updateStatus('reactivityStatus', 'No test task to update', 'error');
                return;
            }
            
            log('Updating test task...');
            const taskIndex = tasks.findIndex(t => t.id === testTaskId);
            if (taskIndex !== -1) {
                const task = tasks[taskIndex];
                const updatedTask = { ...task };
                
                // Simulate progress update
                updatedTask.status = 'downloading';
                updatedTask.progress = Math.floor(Math.random() * 100);
                updatedTask.downloadedSize = Math.floor(Math.random() * 1024 * 1024);
                updatedTask.totalSize = 10 * 1024 * 1024;
                updatedTask.downloadedSegments = Math.floor(Math.random() * 20);
                updatedTask.totalSegments = 20;
                
                tasks.splice(taskIndex, 1, updatedTask);
                log(`Updated task: ${testTaskId} - Progress: ${updatedTask.progress}%`);
                updateStatus('reactivityStatus', `Updated task progress to ${updatedTask.progress}%`, 'success');
                checkStoreStatus();
            } else {
                log('Test task not found', 'error');
                updateStatus('reactivityStatus', 'Test task not found', 'error');
            }
        }
        
        // Delete test task
        function deleteTestTask() {
            if (!testTaskId) {
                log('No test task to delete', 'error');
                updateStatus('reactivityStatus', 'No test task to delete', 'error');
                return;
            }
            
            log('Deleting test task...');
            tasks = tasks.filter(t => t.id !== testTaskId);
            log(`Deleted task: ${testTaskId}`);
            testTaskId = null;
            updateStatus('reactivityStatus', 'Test task deleted', 'success');
            checkStoreStatus();
        }
        
        // Clear all tasks
        function clearAllTasks() {
            log('Clearing all tasks...');
            tasks = [];
            testTaskId = null;
            log('All tasks cleared');
            updateStatus('storeStatus', 'All tasks cleared', 'success');
            updateStatus('reactivityStatus', 'All tasks cleared', 'success');
        }
        
        // Test reactivity
        function testReactivity() {
            log('=== Starting Reactivity Test ===');
            
            // Step 1: Create task
            createTestTask();
            
            setTimeout(() => {
                // Step 2: Update task
                updateTestTask();
                
                setTimeout(() => {
                    // Step 3: Update again
                    updateTestTask();
                    
                    setTimeout(() => {
                        // Step 4: Delete task
                        deleteTestTask();
                        log('=== Reactivity Test Completed ===');
                        updateStatus('reactivityStatus', 'Reactivity test completed successfully', 'success');
                    }, 1000);
                }, 1000);
            }, 1000);
        }
        
        // Clear log
        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }
        
        // Initialize
        log('Task Store Reactivity Test initialized');
        updateStatus('storeStatus', 'Ready for testing', 'info');
    </script>
</body>
</html>
